<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选择所有具有 `type` 属性的元素 */
			[type]{
				border: 1px solid red;
			}
			/* 选择所有 `type` 属性等于 `text` 的元素 */
			[type='button']{
				background-color: yellow;
			}
			/* 选择属性值中包含 `button` 的元素 */
			[class~='button']{
				border-bottom: 1px solid red;
			}
			/* 选择所有 `href` 属性以 `https` 开头的链接 */
			[href^='https']{
				text-decoration: none;
			}
			/* 选择所有 src 属性以 .jpg 结尾的图片 */
			[src$='jpg']{
				border-radius: 10px;
			}
			/* 选择所有 `lang` 属性是 `en` 或者以 `en-` 开头的元素 */
			[lang|='en']{
				border-bottom: 1px solid red;
			}
			/* 选择所有 `title` 属性中包含 `tutorial` 的元素 */
			[title*='tutorial']{
				border-bottom: 1px solid red;
			}
		</style>
	</head>
	<body>
		<!--选择带有指定属性的所有元素（无论属性值是什么）-->
		<input type="text"/>
		<span>aaaa</span>
		<!--选择具有指定属性和值完全匹配的元素。-->
		<input type="button" value="这是一个按钮"/>
		<!--选择属性值中包含指定词（用空格分隔的词列表之一）的元素。-->
		<p class="button input">asasssssssssssssssssssssssssss</p>
		<!--选择属性值以指定值开头的元素。-->
		<a href="/Html/HTML5 表单元素.html">点击跳转HTML</a>
		<a href="https://www.baidu.com">点击跳转百度</a>
		<!--选择属性值以指定值结尾的元素-->
		<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
		<!--选择具有指定值或者以指定值开头并紧跟着连字符 - 的属性值的元素，常用于语言代码。-->
		<p lang="en">aaaaaaaaaaa</p>
		<p lang="us">bbbbbbbbbbb</p>
		<!-- 选择属性值中包含指定值的元素。 -->
		<p title="tutorial1">aaaaaaaaaaaaaaa</p>
		<p title="tutoria1">bbbbbbbbbbbbbbb</p>
	</body>
</html>